<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>地理大师</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
  <style>
    :root {
      --primary-color: #6366f1;
      --secondary-color: #e0e7ff;
      --text-color: #1e293b;
      --light-bg: #f8fafc;
      --border-color: #cbd5e1;
      --shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
      --gradient-start: #a5b4fc;
      --gradient-end: #818cf8;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: var(--text-color);
      background-color: var(--light-bg);
      display: flex;
      flex-direction: column;
      height: 100vh;
      line-height: 1.6;
    }

    header {
      background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
      color: white;
      padding: 18px 20px;
      text-align: center;
      box-shadow: var(--shadow);
      position: relative;
      z-index: 10;
    }

    .app-title {
      font-size: 1.5rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      letter-spacing: 0.5px;
    }

    .app-title::before {
      content: "🧬";
      font-size: 1.8rem;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    }

    .chat-container {
      flex: 1;
      overflow-y: auto;
      padding: 25px;
      background-color: var(--light-bg);
      background-image:
        radial-gradient(circle at 25% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 75% 90%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
      scroll-behavior: smooth;
    }

    .message {
      margin-bottom: 22px;
      max-width: 85%;
      line-height: 1.6;
      animation: fadeIn 0.4s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .user-message {
      background-color: var(--secondary-color);
      color: var(--text-color);
      padding: 14px 20px;
      border-radius: 20px 20px 0 20px;
      margin-left: auto;
      box-shadow: var(--shadow);
      position: relative;
      font-weight: 500;
    }

    .user-message::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: -8px;
      width: 16px;
      height: 16px;
      background: radial-gradient(circle at top left, transparent 70%, var(--secondary-color) 30%);
    }

    .bot-message {
      background-color: white;
      padding: 16px 22px;
      border-radius: 20px 20px 20px 0;
      margin-right: auto;
      box-shadow: var(--shadow);
      position: relative;
    }

    .bot-message::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: -8px;
      width: 16px;
      height: 16px;
      background: radial-gradient(circle at top right, transparent 70%, white 30%);
    }

    .bot-message p,
    .bot-message ul,
    .bot-message ol {
      margin-bottom: 12px;
    }

    .bot-message a {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .bot-message a:hover {
      text-decoration: underline;
      opacity: 0.85;
    }

    .input-container {
      display: flex;
      padding: 18px 20px;
      border-top: 1px solid var(--border-color);
      background: white;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
      position: relative;
      z-index: 10;
    }

    .input-area {
      flex: 1;
      resize: none;
      padding: 14px 20px;
      border: 1px solid var(--border-color);
      border-radius: 30px;
      font-size: 16px;
      transition: all 0.25s ease;
      font-family: inherit;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .input-area:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .send-btn {
      margin-left: 12px;
      padding: 14px;
      width: 52px;
      height: 52px;
      background: linear-gradient(145deg, var(--primary-color), var(--gradient-end));
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }

    .send-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }

    .send-btn:active {
      transform: scale(0.95);
    }

    .send-icon {
      width: 22px;
      height: 22px;
      fill: white;
    }

    .typing-indicator {
      color: #64748b;
      font-style: italic;
      padding: 12px 18px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 14px;
      display: inline-block;
      margin-bottom: 12px;
      animation: pulse 1.5s infinite;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

    @keyframes pulse {
      0% {
        opacity: 0.5;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.5;
      }
    }

    code {
      background-color: #f1f5f9;
      padding: 3px 6px;
      border-radius: 4px;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 0.9em;
    }

    pre {
      background-color: #f8fafc;
      padding: 16px;
      border-radius: 10px;
      overflow-x: auto;
      margin: 12px 0;
      border-left: 4px solid var(--primary-color);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
    }

    @media (max-width: 768px) {
      .message {
        max-width: 90%;
      }

      .chat-container {
        padding: 20px 15px;
      }

      .input-container {
        padding: 15px;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="app-title">地理大师</div>
  </header>

  <div class="chat-container" id="chatContainer">
    <div class="message bot-message">
      <p>你好，我是你的地理大师，请告诉我你想了解的问题！</p>
    </div>
  </div>

  <div class="input-container">
    <textarea id="userInput" class="input-area" placeholder="请输入你的问题..." rows="1"></textarea>
    <button id="sendBtn" class="send-btn">
      <svg class="send-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
      </svg>
    </button>
  </div>

  <script>
    const userInput = document.getElementById('userInput');
    const sendBtn = document.getElementById('sendBtn');
    const chatContainer = document.getElementById('chatContainer');

    sendBtn.addEventListener('click', sendMessage);
    userInput.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
      }
    });

    // Auto-resize textarea as user types
    userInput.addEventListener('input', function () {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
      // Max height constraint
      if (this.scrollHeight > 150) {
        this.style.height = '150px';
        this.style.overflowY = 'auto';
      }
    });

    function addUserMessageToUI(message) {
      const msg = document.createElement('div');
      msg.className = 'message user-message';
      msg.textContent = message;
      chatContainer.appendChild(msg);
    }

    function addBotMessageContainer() {
      const msg = document.createElement('div');
      msg.className = 'message bot-message';
      msg.innerHTML = '';
      chatContainer.appendChild(msg);
      return msg;
    }

    async function sendMessage() {
      const message = userInput.value.trim();
      if (!message) return;

      addUserMessageToUI(message);
      userInput.value = '';
      userInput.style.height = 'auto';

      const botMsgDiv = addBotMessageContainer();
      const typing = document.createElement('div');
      typing.className = 'typing-indicator';
      typing.textContent = '正在思考...';
      chatContainer.appendChild(typing);
      chatContainer.scrollTop = chatContainer.scrollHeight;

      try {
        const response = await fetch("https://ai.gitee.com/v1/chat/completions", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer WPWKO9VKEGLJ6KNQJMGWJMA7WTQ1P2F41SKAA2QC",
            "X-Failover-Enabled": "true"
          },
          body: JSON.stringify({
            model: "DeepSeek-R1-Distill-Qwen-32B",
            stream: true,
            max_tokens: 80000,
            temperature: 1,
            top_p: 0.2,
            frequency_penalty: 0,
            extra_body: { top_k: 50 },
            messages: [
              {
                role: "system",
                content: "你是一位地理大师，对于所有的地理知识都非常了解，对现有的地理知识都可以回答。你帮助学生们来解决大学地理问题。先获取学生的需求。根据要求回答内容，并且是非常非常有证据的逻辑。逻辑性要非常的强，先写一个答案，然后根据答案给出分析 过程与证据。"
              },
              {
                role: "user",
                content: message
              }
            ]
          })
        });

        const reader = response.body.getReader();
        const decoder = new TextDecoder("utf-8");
        let result = '';

        while (true) {
          const { value, done } = await reader.read();
          if (done) break;

          const chunk = decoder.decode(value, { stream: true });
          const lines = chunk.split("\n").filter(l => l.trim().startsWith("data: "));

          for (const line of lines) {
            const data = line.replace("data: ", "");
            if (data === "[DONE]") continue;
            try {
              const json = JSON.parse(data);
              const content = json.choices?.[0]?.delta?.content;
              if (content) {
                result += content;
                botMsgDiv.innerHTML = marked.parse(result);
                chatContainer.scrollTop = chatContainer.scrollHeight;
              }
            } catch (e) {
              console.error("解析失败", e);
            }
          }
        }

      } catch (error) {
        console.error("请求失败：", error);
        botMsgDiv.innerHTML = "请求失败，请检查网络或API配置。";
      } finally {
        typing.remove();
      }
    }
  </script>
</body>

</html>